<template>
    <!-- 近7天平台用户增长情况 -->
    <div class="user-growth">
        <echart-title title="近7天平台用户增长情况"></echart-title>
        <div class="user-content bj-flex-center">
            <div class="user-echart" ref="userId"></div>
        </div>
    </div>
</template>

<script>
import echartTitle from "@/components/echartTitle.vue";
export default {
    components:{
        echartTitle
    },
    props:{
        
    },
    data () {
        return {
            
        }
    },
     mounted () {
        this.initChart();
    },
    methods: {
        initChart(){
            // 初始化 echarts 实例
            const myChart = this.$echarts.init(this.$refs.userId);
             // 指定图表的配置项和数据
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [
                        {
                            name: '用户数量'
                        },
                    ],
                    left: "78%",
                    top:"4%",
                    textStyle: {
                        color: "#A1D5FF",
                        fontSize: 12
                    }, 
                    type:'plain',
                    icon:'rect',
                    itemWidth: 12,  // 设置宽度
                    itemHeight: 12,
                    itemGap: 12, // 设置间距

                },
                grid: {
                    top: '12%',
                    right: '3%',
                    left: '8%',
                    bottom: '8%'
                },
                xAxis: [{
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#AACBDE',
                        textStyle: {
                            fontSize: 14
                        },
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        formatter: '{value}',
                        color: '#AACBDE',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    }
                }],
                series: [{
                    name:'用户数量',
                    type: 'bar',
                    data: [1200,3201,6235,965,12532,6685],
                    barWidth: '12px',
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(89, 241, 147, 1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(100, 200, 255, 1)' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [30, 30, 30, 30],
                            shadowBlur: 4,
                        }
                    },
                }]
            }
        
            // 使用配置项显示图表
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" class>
.user-growth{
    width: 456px;
    height: 440px;
    .user-content{
        width: 100%;
        height: 406px;
        background: linear-gradient( 180deg, rgba(7,29,65,0.1) 0%, rgba(10,47,107,0.4) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(34, 83, 135, 1), rgba(42, 112, 186, 1), rgba(34, 83, 135, 1), rgba(57, 128, 202, 1), rgba(34, 83, 135, 1)) 1 1;
    }
    .user-echart{
        width: 436px;
        height: 406px;
    }
}
</style>